<template>
  <div class="login">
    <div class="name">
      <img src="../../img/logo.png" alt="" class="logo">
      <div class="name_text">药事精细化管理平台</div>
    </div>
    <div class="box">
      <div class="b_img">
        <img src="../../img/login-01.png" alt="">
      </div>
      <div class="b_input">
        <div class="inputbox">
          <div class="welcome">欢迎登录</div>
          <div class="user clear">
            <div class="user_tip">账号</div>
            <div class="user_input clear">
              <i class="user_icon" />
              <input v-model="username" type="text" class="user_inputbox" placeholder="请输入账号">
            </div>
          </div>
          <div class="user clear">
            <div class="user_tip">密码</div>
            <div class="user_input clear">
              <i class="user_icon user_pass" />
              <input v-model="password" type="password" class="user_inputbox" placeholder="请输入密码">
            </div>
          </div>
		  <div class="user clear">
		    <div class="user_tip">选择医院</div>
		    <div class="user_input clear">
		      <el-select v-model="value" placeholder="请选择" class="user_select">
		          <el-option
		            v-for="item in options"
		            :key="item.hs_code"
		            :label="item.hs_name"
		            :value="item.hs_code"
					>
		          </el-option>
		        </el-select>
		    </div>
		  </div>
          <div class="user_regist clear">
            <div class="ur_left">忘记密码？</div>
            <div class="ur_right" @click="toRegist">注册账号</div>
          </div>
          <div class="login_btn" @click="toLogin">登录</div>
        </div>
      </div>
    </div>
    <div class="tip">版权所有@无锡医博士智能科技有限公司</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
		options: [],
		value: '',
      username: 'admin',
      password: '123456'
    }
  },
  mounted () {
	  this.getHos();
  },
  methods: {
	  async getHos () {
		let res = await this.$ptc.hospital();
		//console.log(res)
		if(res.code == 1){
			this.options = res.data;
		}
	  },
	  toRegist () {
		  this.$router.push({ path: '/regist' });
	  },
    async toLogin() {
		let res=await this.$ptc.login({
			username:this.username,
			password:this.password,
			hs_code:this.value
		})
		console.log(res);
		if(res.code == 1){
			sessionStorage.setItem('zlToken', 'zlToken');
			sessionStorage.setItem('token', res.data.token);
			sessionStorage.setItem('username', this.username);
			localStorage.setItem("user",JSON.stringify(res.data.user));
			this.$router.push({ path: '/index' });
		}else{
			this.$message({
			  message: res.msg,
			  type: 'error',
			  duration:1500
			});
		}
    }
  }
}
</script>
<style>
	.user_select .el-input__inner{
		border:0;
		background:#f9f9f9;
	}
</style>
<style lang="scss" scoped>
	.login{
		width:100%;
		height:100vh;
		overflow:hidden;
		background:url(../../img/login-bg.jpg) no-repeat center;
		background-size:cover;
		box-sizing: border-box;
		padding-top:0.55rem;
		position:relative;
		.name{
			padding:0 0.88rem;
			height:0.76rem;
			margin:0 auto;
			// line-height:0.76rem;
			line-height:0.3rem;
			.logo{
				float:left;
				height:100%;
				width:auto;
				position:relative;
				top:-0.2rem;
			}
			.name_text{
				float:left;
				color:#fff;
				font-size:0.6rem;
				margin-left:0.45rem;
				width:5.8rem;
				text-align-last: justify;
			}
		}
		.box{
			width:14.6rem;
			// height:5.5rem;
			height:6.5rem;
			border-radius:0.1rem;
			overflow:hidden;
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			.b_img{
				width:50%;
				float:left;
				height:100%;
				background:#c1def4;
				padding-top:0.5rem;
				img{
					display:block;
					width:5rem;
					height:auto;
					margin:0 auto;
				}
			}
			.b_input{
				width:50%;
				float:left;
				height:100%;
				background:#fff;
				position:relative;
				.inputbox{
					width:5.05rem;
					height:100%;
					margin:0 auto;
					padding-top:0.45rem;
					.welcome{
						width:2rem;
						height:0.3rem;
						border-left:0.05rem solid #2f90fd;
						line-height:0.3rem;
						font-size:0.36rem;
						color:#333;
						padding-left:0.15rem;
						margin-bottom:0.3rem;
						text-align-last: justify;
					}
					.user{
						margin-top:0.05rem;
						.user_tip{
							width:1.2rem;
							font-size:0.3rem;
							color:#333;
							float:left;
							text-align-last: justify;
							margin-left:0.1rem;
						}
						.user_input{
							width:5rem;
							height:0.6rem;
							border:0.02rem solid #d2d2d2;
							background:#f9f9f9;
							border-radius:0.04rem;
							overflow:hidden;
							float:left;
							margin-top:0.05rem;
							.user_icon{
								width:0.58rem;
								height:0.58rem;
								background:url(../../img/user.png) no-repeat center;
								background-size:0.27rem 0.33rem;
								float:left;
							}
							.user_pass{
								background:url(../../img/pass.png) no-repeat center;
								background-size:0.27rem 0.33rem;
							}
							.user_inputbox{
								width:4.2rem;
								height:100%;
								line-height:0.6rem;
								color:#7c7c7c;
								font-size:0.24rem;
								float:left;
								background:#f9f9f9;
							}
							.user_select{
								width:100%;
								height:100%;
								line-height:0.6rem;
								color:#7c7c7c;
								font-size:0.24rem;
								background:#f9f9f9;
								display:block;
								
							}
						}
					}
					.user_regist{
						width:100%;
						padding:0 0.15rem;
						margin-top:0.3rem;
						.ur_left{
							width:50%;
							font-size:0.24rem;
							color:#808182;
							float:left;
							cursor: pointer;
						}
						.ur_right{
							width:50%;
							font-size:0.24rem;
							color:#3490f2;
							float:right;
							text-align:right;
							cursor: pointer;
						}
					}
					.login_btn{
						width:100%;
						height:0.66rem;
						line-height:0.66rem;
						background:#2a7fe0;
						text-align:center;
						color:#fff;
						font-size:0.26rem;
						margin-top:0.3rem;
						border-radius:0.04rem;
						cursor:pointer;
					}
				}
			}
		}
		.tip{
			width:100%;
			font-size:0.2rem;
			color:#fff;
			text-align:center;
			position:fixed;
			bottom:0.45rem;
		}
	}
</style>
